<template>
  <div>
    <div v-if="defaultShowImg != ''">
        <el-image
        style="width: 100px; height: 100px"
        :src="defaultShowImg"
        ></el-image>
    </div>
    <div v-else>
      <!-- 图片 -->
      <el-upload
        ref="upload"
        v-if="circleType === 'picture'"
        class="set-image-ulrs"
        action="http://www.jjldkj.com:10089/fileUpload2020"
        list-type="picture-card"
        accept=".jpg, .png, .jpeg"
        :class="{ hide: hideUpload }"
        :multiple="true"
        :limit="limit"
        :file-list="imagesList"
        :data="upData"
        :show-file-list="showFileList"
        :on-change="handleImageChange"
        :before-upload="beforeImageUpload"
        :on-success="handleImageSuccess"
        :on-error="handleImageError"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleImageRemove"
        :on-exceed="handleImageExceed"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "LabelRemark",
  data() {
    return {
      hideUpload: false, // 隐藏图片上传按钮
      showFileList: true, // 显示图片列表
      imagesList: [], // 图片回显

      showVideoList: true, // 显示图片列表
      hideVideoUpload: false, // 隐藏视频上传按钮
      videoList: [],
      imageUrl: "", // 大图url
      dialogVisible: false, // 显示大图
    };
  },
  props: {
    limit: {
      type: Number,
      required: false,
      default: function () {
        return 1;
      },
    },
    upData: {
      type: Object,
      required: false,
       default: function () {
        return { myfile: "", packageName: "pc" };
      },
    },
    circleType: {
      type: String,
      required: false,
      default: function () {
        return "picture";
      },
    },
    defaultShowImg: {
      type: String,
      required: false,
      default: function () {
        return "";
      },
    },
    imageUrls: {
      type: Array,
      required: false,
      default: function () {
        return {};
      },
    },
  },
  methods: {
      clearAllUpfile(){
          this.upData.myfile = '';
      },
    // 图片超出个数限制时的钩子
    handleImageExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 图片改变
    handleImageChange(file, fileList) {
      console.log(fileList.length + "" + this.limit);
      if (fileList.length == this.limit) {
        this.showFileList = true;
        this.hideUpload = true;
      }
    },
    // 图片类型大小验证
    beforeImageUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.warning("上传图片只能是 JPG|PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.warning("上传图片大小不能超过 2MB!");
      }
      this.upData.myfile = file;
      return isJPG && isLt2M;
    },
    // 图片上传成功
    handleImageSuccess(res, file, fileList) {
      for (const fl of fileList) {
        if (fl.response) {
          fl.url = fl.response.data.url;
        }
      }
      this.imagesList = fileList;
      this.imageUrls.push(res.data.url);
    },
    // 图片上传失败
    handleImageError(err, file) {
      this.$alert(err, "文件上传失败", { type: "error" });
      this.hideUpload = false;
    },
    // 图片移除
    handleImageRemove(file, fileList) {
      let imgUrlId = this.imageUrls.indexOf(file.response.data.url);
      this.imageUrls.splice(imgUrlId, 1);
      this.hideUpload = false;
      this.imagesList = fileList;
    },
    // 图片|视频 大图展示
    handlePictureCardPreview(file) {
      if (this.circleType === "picture") {
        this.imageUrl = file.url;
      } else {
        this.video = file.url;
      }
      this.dialogVisible = true;
    },
  },
};
</script>

